import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import MainPage from "./pages/main";

// import Hello from './components/Hello';
// import LikeButton from './components/LikeButton';
// import MouseTracker from './components/MouseTracker';
// import useMousePosition from './hooks/useMousePosition';
// import useURLLoader from './hooks/useURLLoader';

interface IThemeProps {
  [key: string]: { color: string; background: string };
}

const themes: IThemeProps = {
  light: {
    color: "#000",
    background: "#eee",
  },
  dark: {
    color: "#fff",
    background: "#222",
  },
};

export const ThemeContext = React.createContext(themes.dark);

const App: React.FC = () => {
  // const [show, setShow] = useState(true)
  // const positions = useMousePosition();
  // const [data, loading] = useURLLoader("https://dog.ceo/api/breeds/image/random", [show]);
  // const dogResult = data as IShowResult

  return (
    <div className="App">
      <ThemeContext.Provider value={themes.dark}>
        <MainPage></MainPage>
      </ThemeContext.Provider>
    </div>
  );
};

export default App;
